import React, {useEffect} from 'react';
import {
    Alert, BackHandler,
    Dimensions,
    Image,
    SafeAreaView,
    TextInput,
    ToastAndroid,
    TouchableOpacity,
    TouchableWithoutFeedback,
    View
} from "react-native";
import { StyleSheet } from 'react-native';
import {
    Button,
    Card,
    Divider,
    Icon,
    Input,
    Layout, List,
    Tab,
    TabView,
    Text,
    TopNavigation,
    TopNavigationAction
} from '@ui-kitten/components';
import SorageManager from "../Compoments/SorageManager";
import {showMessage} from "react-native/Libraries/Utilities/LoadingView";

const data = new Array(8).fill({
    title: 'Item',
});



export const ScpoeCheckScreen = ({ route,navigation }) => {

    const showToast = (message) => {
        ToastAndroid.show(message, ToastAndroid.SHORT);
    };

    const {id} = route.params;

    const [servicingList, setServicingList] = React.useState('');

    const navigateAddTicketCollection = () => {
        navigation.navigate('AddTicketCollection');
    };

    /**
     * 获取维修范围列表
     * @param rkid
     */
    const getServicingList=(rkid)=>{
        const  requestOptions = {
            method: 'GET',
            redirect: 'follow'
        };

        fetch("http://htjoa.nrnet.cn/dc14/jwmis/servicing/servicing?rkid="+rkid, requestOptions)
            .then(response => response.json())
            .then(result => {
                console.log(result,"范围列表")
                setServicingList(result)
            })
            .catch(error => console.log('error', error));
    }

    /**
     * 检查开始
     * @param kszyr
     * @param id
     */
    const setStart=(kszyr,id1)=>{
        const requestOptions = {
            method: 'GET',
            redirect: 'follow'
        };

        console.log("检查开始按钮被点击",kszyr,id1)

        fetch("http://htjoa.nrnet.cn/dc14/jwmis/servicing/start?kszyr="+kszyr+"&id="+id1, requestOptions)
            .then(response => response.text())
            .then(result => {
                console.log(result)
                if (result==="success"){
                    showToast("检查开始")
                    getServicingList(id)
                }else {
                    showToast("检查已开始，请勿重复操作")
                }
            })
            .catch(error => console.log('error', error));
    }

    /**
     * 检查结束
     * @param kszyr
     * @param id
     */
    const setEnd=(jszyr,id1)=>{
        const requestOptions = {
            method: 'GET',
            redirect: 'follow'
        };

        fetch("http://htjoa.nrnet.cn/dc14/jwmis/servicing/endupdate?jszyr="+jszyr+"&id="+id1, requestOptions)
            .then(response => response.text())
            .then(result => {
                console.log(result)
                if (result==="success"){
                    showToast("检查结束")
                    getServicingList(id)
                }else {
                    showToast("请先开始检查或检查已结束，请勿重复操作")
                }
            })
            .catch(error => console.log('error', error));
    }


    useEffect(()=>{
        getServicingList(id)
    },[])

    const renderItemHeader = (headerProps, info) => (
        <View {...headerProps} style={{alignItems: 'center',margin:10}}>
            <Text category='h6' >
                     部位名称： {info.item.bwmc}
            </Text>
        </View>
    );

    const renderItemFooter = (footerProps,info) => (
        <Layout style={{flexDirection:"row",alignItems: 'center', justifyContent:'space-evenly'
        }}>

            <Button appearance='outline' status='warning' onPress={()=>{
                SorageManager.get('userInf').then(r =>{
                    console.log(r,"userINF")
                   setStart(r["userid"],info.item.id)

                } )

            }} >
                检查开始
            </Button>

            <Button onPress={()=>{
                SorageManager.get('userInf').then(r =>{
                    console.log(r,"userINF")
                    setEnd(r["userid"],info.item.id)

                } )
            }} >
                检查结束
            </Button>

        </Layout>

    );

    const renderItem = (info) => (
        <Card
            style={styles.item}
            status='basic'
            header={headerProps => renderItemHeader(headerProps, info)}
            footer={footerProps => renderItemFooter(footerProps,info)}>
            <Layout style={styles.textContainer}>
                <Layout style={styles.textItem}>
                    <Text>
                        检察范围: {info.item.jcfw}
                    </Text>
                </Layout>

                {/*<Layout style={styles.textItem}>*/}
                {/*    <Text>*/}
                {/*        范围:0*/}
                {/*    </Text>*/}
                {/*</Layout>*/}
                {/*<Layout style={styles.textItem}>*/}
                {/*    <Text>*/}
                {/*        动态:0*/}
                {/*    </Text>*/}
                {/*</Layout>*/}
            </Layout>


            <Layout style={styles.textContainer}>
                <Layout style={styles.textItem}>
                    <Text>
                        开始作业人:{info.item.nkszyr}
                    </Text>
                </Layout>


                <Layout style={styles.textItem}>
                    <Text>
                        结束作业人:{info.item.njszyr}
                    </Text>
                </Layout>


            </Layout>


            <Layout style={styles.textContainer}>
                <Layout style={styles.textItem}>
                    <Text>
                        开始时间:{info.item.kssj}
                    </Text>
                </Layout>
            </Layout>
            <Layout style={styles.textContainer}>
                <Layout style={styles.textItem}>
                    <Text>
                        完成时间: {info.item.wcsj}
                    </Text>
                </Layout>


            </Layout>

        </Card>
    );










    const BackIcon = (props) => (
        <Icon {...props} name='arrow-back'/>
    );

    const navigateFixEnd = () => {
        navigation.navigate('FixEnd');
    };

    const BackAction = () => (
        <TopNavigationAction icon={BackIcon} onPress={navigateFixEnd}/>
    );

    const [selectedIndex, setSelectedIndex] = React.useState(0);
    const [value, setValue] = React.useState('');
    return (
        <View style={{ flex: 1 }}>
            <TopNavigation
                accessoryLeft={BackAction}

                title='机车重点部位检查范围' alignment='center' />
            <Divider/>
                    <Layout style={styles.tabContainer}>


                        <List
                            style={styles.container}
                            contentContainerStyle={styles.contentContainer}
                            data={servicingList}
                            renderItem={renderItem}
                        />

                    </Layout>




        </View>
    );
};

const styles = StyleSheet.create({
    container: {

    },
    contentContainer: {
        paddingHorizontal: 15,
        // paddingVertical: 4,
    },
    item: {
        marginTop:15,
        // marginVertical: 4,

    },

    tabContainer: {
        height:Dimensions.get('window').height-90,
    },

    textContainer:{
        flexDirection:'row',
        flexWrap:'wrap',
        justifyContent:"space-evenly",
        alignItems:"center",
        marginBottom:10

    },
    textItem:{
        justifyContent:'center',
        alignItems:'center',

    }
});